<template>
  <div class="markingDetail">
    <div class="wbsName">{{wbsName}}</div>
    <template v-if="treeDetailData!=null">
      <div class="treeDiv">
        <treeCheck @treeCheck="treeCheck" />
      </div>
    </template>
  </div>
</template>

<script>
import treeCheck from '@/components/tree/treeCheck'
import { markFinish } from '@/api/completedMarking.js'
export default {
  name: 'markingDetail',
  props: ['wbsName', 'frontWbsId', 'orgId', 'projectId'],
  components: {
    treeCheck
  },
  data() {
    return {
      addCheckData: [],

      treeDetailData: this.$store.state.treeDetailData,
      treeDetailCheck: this.$store.state.treeDetailCheck,
      submitData: {
        frontWbsId: this.frontWbsId,
        orgId: this.orgId,
        projectId: this.projectId,
        ebsProcessAddDTOS: ''
      },
      clickFlag: false
    }
  },
  mounted() {
    // console.log(XEUtils.toDateString(Date.now()));
  },
  methods: {
    //表格配置
    getConfigData() {
      let data = {
        wbsId: this.frontWbsId
      }
      wbsTreeByWbsId(data).then((res) => {
        // console.log(res);
        this.treeDetailData = res.data

        this.treeDetailCheck = []
        this.treeDetailData = XEUtils.mapTree(this.treeDetailData, (item) => {
          if (item.status == '1') {
            this.treeDetailCheck.push(item.id + '@' + item.parentId + '@' + item.name + '@' + item.nodeType)
          }
          let disabledFlag = false
          if (item.optional == 0 && item.nodeType == '3') {
            disabledFlag = true
          }
          return {
            ...item,
            key: item.id + '@' + item.parentId + '@' + item.name + '@' + item.nodeType,
            title: item.name,
            disabled: disabledFlag
          }
        })
        // console.log(this.treeDetailData)

        // console.log(this.treeDetailCheck)
      })
    },

    treeCheck(val) {
      // this.$store.commit('setTreeDetailData', {
      //   treeDetailData: this.treeDetailData,
      //   treeDetailCheck: val
      // })

      // this.$forceUpdate()
      let ebsProcessAddDTOS = []
      this.clickFlag = true
      let checkArr = []
      val.forEach((item) => {
        checkArr = item.split('@')
        let obj = {}
        if (checkArr[3] == 3) {
          obj.processId = checkArr[0]
          obj.ebsId = checkArr[1]
          obj.processName = checkArr[2]
          ebsProcessAddDTOS.push(obj)
        }
      })

      this.addCheckData = ebsProcessAddDTOS

      // console.log(data)
    },
    onSubmit() {
      if (this.clickFlag == false) {
        let ebsProcessAddDTOS = []
        let checkArr = []
        this.treeDetailCheck.forEach((item) => {
          checkArr = item.split('@')
          let obj = {}
          if (checkArr[3] == 3) {
            obj.processId = checkArr[0]
            obj.ebsId = checkArr[1]
            obj.processName = checkArr[2]
            ebsProcessAddDTOS.push(obj)
          }
        })
        this.submitData.ebsProcessAddDTOS = ebsProcessAddDTOS.concat(this.addCheckData)
      } else {
        this.submitData.ebsProcessAddDTOS = this.addCheckData
      }
      return this.submitData
     
      // let _this = this
      // markFinish(this.submitData).then((res) => {
      //   // console.log(res)
      //   this.$message.destroy()
      //   this.$message.success(res.message)
      //   console.log(_this.$parent)

      //   _this.$parent.getChildList()
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.treeDiv {
  height: calc(100vh - 200px);
  overflow: auto;
  margin-bottom: 20px;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.wbsName {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>
